<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <style>
    html,body{
       margin:0px;
       width:100vw;
       height:100vh;

      }
    main{
       height:100vh;
       display: grid;
       grid-template-columns: 200px auto 200px;
       grid-template-rows: 80px 30px auto 40px;
       grid-template-areas: "head head head"
                     "topMenu topMenu topMenu"
                     "leftSide main rightSide"
                     "foot foot foot"
        }

    .head{
        grid-area:head;
        border:1px solid #ccc;
         }
    .topMenu{
        grid-area:topMenu;
       }
    .leftSide{
       grid-area: leftSide;
      }
.main{

grid-area: main;

border:1px solid #ccc;

}

.rightSide{

grid-area: rightSide;

border:1px solid #ccc;

}

.foot{

grid-area: foot;

border:1px solid #ccc;

}

.topMenu_ul,.leftMenu_ul_level1,.leftMenu_ul_level2{

padding-left:0px;

}

.topMenu_ul{

-webkit-margin-start:5rem;

-webkit-margin-before:4px;

-webkit-margin-after:0rem;

}

.topMenu_li,.leftMenu_li_level1,.leftMenu_li_level2{

list-style: none;

}

.topMenu_li{

float: left;

text-align:center;

width:120px;

font:bold 14px/20px '宋体';

border-left:2px solid red;

}

.topMenu_li:last-child{

border-right:2px solid red;

}

.a_menuClass{

text-decoration: none;

color:black;

vertical-align: 2px;

}

.topMenuImgs,.leftMenuImgs{

display: inline-block;

margin-top:3px;

width:15px;

height: 15px;

}

.leftMenuImgs{

float: right;

margin-top:1px;

margin-right:1px;

width:15px;

height: 15px;

border:1px solid #ccc;  

cursor: pointer;

}

.topMenu_li nav:hover{

cursor: pointer;

}

#tomMenu_img_article{

background:url(../img/0032017360716703_b.png) no-repeat -66px -27px/170px 150px;

}

.leftMenu_ul_level1{

margin:2px auto;

font:bold 14px/20px '宋体';

width:150px;

}

.leftMenu_li_level1{

border:1px solid #ccc;

background-color:#fdddb3;

margin-top:2px;

}

.leftMenu_li_level2{

text-align:center;

font:bold 12px/20px '宋体';

border:1px solid #ccc;

}</style>

    <script>

    function init(){

        let nodes=document.querySelectorAll(".leftMenuImgs");

        Array.from(nodes).forEach((item)=>{

            item.addEventListener("click",(event)=>{

                let node=event.target.parentNode.nextElementSibling;

                if(node.hidden==true){

                    node.hidden=false;

                }else{

                    node.hidden=true;

                }

            },false);

        });

    }

    window.addEventListener("load",init,false);

    </script>

</head>



<body>

    <main>

        <header class="head">logo</header>

        <nav class="topMenu">

            <ul class="topMenu_ul">

                <li class="topMenu_li">

                    <nav>

                        <div class="topMenuImgs" id="tomMenu_img_first"></div>

                        <a class="a_menuClass" href="#">首页</a>

                    </nav>

                </li>

                <li class="topMenu_li">

                    <nav>

                        <div class="topMenuImgs" id="tomMenu_img_article"></div>

                        <a id="a_insertArticle" class="a_menuClass" href="#">写文章</a>

                    </nav>

                </li>

                <li class="topMenu_li">

                    <nav>

                        <div class="topMenuImgs"  id="tomMenu_img_articleType"></div>

                        <a class="a_menuClass" href="#">文章类型</a>

                    </nav>

                </li>

                <li class="topMenu_li">

                    <nav>

                        <div class="topMenuImgs"  id="tomMenu_img_config"></div>

                        <a class="a_menuClass" href="#">设置</a>

                    </nav>

                </li>

            </ul>

        </nav>

        <nav class="leftSide">

            <h2 style="text-align: center">文章类型</h2>

            <ul class="leftMenu_ul_level1">

                <li class="leftMenu_li_level1">

                    Java Core

                    <div class="leftMenuImgs"></div>

                </li>

                <ul class="leftMenu_ul_level2" hidden>

                    <li class="leftMenu_li_level2">面向对象</li>

                    <li class="leftMenu_li_level2">多线程</li>

                </ul>

                <li class="leftMenu_li_level1">Java Web

                        <div class="leftMenuImgs">

                </li>

                <ul class="leftMenu_ul_level2" hidden>

                        <li class="leftMenu_li_level2">Servlet3+</li>

                        <li class="leftMenu_li_level2">JSTL/EL</li>

                    </ul>

                <li class="leftMenu_li_level1">前端技术

                        <div class="leftMenuImgs">

                </li>

                <ul class="leftMenu_ul_level2" hidden>

                        <li class="leftMenu_li_level2">HTML5</li>

                        <li class="leftMenu_li_level2">CSS3</li>

                        <li class="leftMenu_li_level2">ECMAScript 6</li>

                    </ul>

                <li class="leftMenu_li_level1">心灵鸡汤

                        <div class="leftMenuImgs">

                </li>

                <ul class="leftMenu_ul_level2" hidden>

                        <li class="leftMenu_li_level2">心情故事</li>

                    </ul>

            </ul>

        </nav>

        <section class="main">main page</section>

        <nav class="rightSide">right menu</nav>

        <footer class="foot">info</footer>

    </main>

</body>



</html>
